<template>
  <div class='xiangqing'>
    <div class='navOne'>
      <div class="box">
        <div v-for='(item,index) in navOne' :key='index' @click='checkfun(index)' :class="{active:check-index==0}">{{item}}</div>
      </div>
    </div>
    <div class="lazyLoad">
      <div class="One" v-if='check-0==0'>
        <div class="box" v-for='(item,index) in arr' :key='index'>
          <div class="bg" :style='{backgroundImage:"url("+item.img+")"}'></div>
          <div class="txt">{{item.txt}}</div>
          <div class="bottom">
            <div class="money">￥<span>{{item.money}}</span>起</div>
            <div class="number">{{item.number}}人已报名</div>
          </div>
        </div>
      </div>
      <div class="Two" v-if='check-1==0'>
        <div class="box" v-for='(item,index) in arr2' :key='index'>
          <div class="bg" :style='{backgroundImage:"url("+item.img+")"}'></div>
          <div class="txt">{{item.txt}}</div>
          <div class="bottom">
            <div class="money">￥<span>{{item.money}}</span>起</div>
            <div class="number">{{item.number}}人已报名</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Xiangqing',
  data () {
    return {
      check: 0,
      navOne: ['全球经典', '赏秋', '户外', '亲子', '秋摄', '人文', '房车', '海岛'],
      arr: [
        {
          img: '/static/Home/arr1.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        },
        {
          img: '/static/Home/arr2.jpg',
          txt: '[徒步雨崩]游侠客高海拔徒步TOP1（所有批次独立成团），朝圣梅里雪山，徒步雨崩村-冰湖-神瀑，5/7日轻装徒步之旅（免费借用登山杖、颁发纪念奖牌、全程标间独卫）',
          money: '1980',
          number: '2284'
        },
        {
          img: '/static/Home/arr3.jpg',
          txt: '[稻城亚丁秋色环线]2021 探寻丁真的世界：二进亚丁核心景区-夜观雪山银河-天空之城理塘-异域墨石公园-漫步中路藏寨-塔公草原，川西8日深度之旅！（可升级优享套餐）',
          money: '3880',
          number: '2010'
        },
        {
          img: '/static/Home/arr4.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        },
        {
          img: '/static/Home/arr3.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        }
      ],
      arr2: [
        {
          img: '/static/Home/arr3.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        },
        {
          img: '/static/Home/arr4.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        },
        {
          img: '/static/Home/arr4.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        },
        {
          img: '/static/Home/arr4.jpg',
          txt: '[额济纳旗银川线]全新优化，西夏古都-网红乌海湖-巴丹吉林沙漠-西部梦幻大峡谷-额济纳胡杨林-夜观大漠胡杨林-弱水金沙湾胡杨林-黑水城怪树林-古居延泽，6日小众深度游！',
          money: '3980',
          number: '2284'
        }
      ]
    }
  },
  methods: {
    checkfun (ele) {
      this.check = ele
    }
  }
}
</script>
<style scoped lang='less'>
.xiangqing{
  padding-top:10px;
  background-color: #f5f5f5;
  margin-bottom:60px;
  &>.navOne{
    overflow:auto;
    &::-webkit-scrollbar{
      width: 0;
    }
    &>.box{
      width: 1040px;
      display: flex;
      &>div{
        width: 100px;
        height: 50px;
        line-height: 50px;
        font-size:16px;
        margin-left:30px;
      }
      .active{
        font-size:18px;
        font-weight: bold;
        background-image: url(/static/Home/check.png);
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
      }
    }
  }
  &>.lazyLoad{
    &>div{
      display: flex;
      flex-wrap: wrap;
      padding:0 10px;
      justify-content: space-between;
      &>.box{
        background-color: #fff;
        border-radius: 10px;
        overflow: hidden;
        width: 48.5%;
        margin-bottom:10px;
        .bg{
          width: 100%;
          height: 150px;
          background-repeat: no-repeat;
          background-position: center;
          background-size: cover;
        }
        .txt{
          margin:10px;
          font-size:16px;
          font-weight:bold;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        .bottom{
          margin:10px;
          display: flex;
          justify-content: space-between;
          .money{
            color: #ff8b2f;
            &>span{
              font-size:20px;
              font-weight:bold;
            }
          }
          .number{
            color:#999;
          }
        }
      }
    }
  }
}
</style>
